<template>
  <div class="similar-songs" v-if="similar_songs.length > 0">
    <div class="title border-b-1 pt-2 pb-2 mb-4 yu-color-text">
      {{ store.currentInfo.playMoreLike }}
    </div>
    <ul>
      <li v-for="songs in similar_songs" :key="songs.id" class="flex">
        <div class="flex flex-col">
          <span
              class="w-40 truncate"
              :class="styleHover"
              @click="jumpPcSongDetail(songs.id)"
          >
            {{ songs.name }}
          </span>
          <div class="w-40 truncate mt-1 mb-2 ">
             <span class="text-xs yu-titleColor"
                   :class="styleHover"
                   v-for="(artist, index) in songs.album.artists"
                   :key="artist.id"
                   @click.stop="jumpArtistDetails(artist.id)"
             >
            {{ artist.name }}
               <span v-show="index < songs.album.artists.length - 1 "> / </span>
          </span>
          </div>
        </div>
        <div class="flex flex-1 justify-end text-xl items-center">
          <i
              class="i-mdi-play-outline"
              :class="styleHover"
              @click="addOrPlayMusicList(songs.id, false)"
          />
          <i
              class="i-mdi-tray-plus mr-2 ml-2"
              :class="styleHover"
              @click="addOrPlayMusicList(songs.id, true)"
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index"
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()

const data = reactive({
  similar_songs: [],
  styleHover: 'cursor-pointer yu-textColor-hover'
})
const {similar_songs, styleHover} = toRefs(data)
const store = useStore()

// 获取相似歌曲
store.getSimiSong(store.currentInfo.id).then(songs => {
  data.similar_songs = songs
  // console.log(songs)
})

// 添加或者播放歌曲到播放列表
const addOrPlayMusicList = (id, flag) => {
  store.getSongDetail(id, flag)
}

// 跳转到当前歌曲的详情
const jumpPcSongDetail = (id) => {
  router.push({
    path: '/pc-song-detail',
    query: {
      id
    }
  })
}

// 跳转到歌手详情
const jumpArtistDetails = (id) => {
  router.push({
    path: '/artist',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
